<template>
  <div>
    <beginView :textInfo="this.textInfo" @isOpen="getOpen" v-if="this.isOpend == 1" />
    <head2 />
    <div id="Fhead">
      <div id="fanhui" @click="fanHui" style="font-size: 18px">
        <i class="el-icon-back" style=""></i>
      </div>
      <span>请数出10根小棒</span>
      <div id="content">
        <div class="stick" v-for="item in 18" :key="item" @click="changeColor(item - 1)"></div>
      </div>
      <el-button type="success" style="margin-top: 7px" @click="submit">提交答案</el-button>
      <!-- <div id="Interface"></div> -->
    </div>
    <audio src="@/assets/adiuo/click.mp3" id="myAudio" ref="myAudio"></audio>
    <div id="GameOver" v-if="isEnd">
      <div id="endTittle">游戏结束</div>
      <div>
        <img src="https://pic2.imgdb.cn/item/644a7a5e0d2dde5777f7ad9f.jpg" alt="" />
        <p>挑战失败</p>
      </div>
      <div id="theEnd">
        选择正确，你选择了10根
      </div>
      <div id="btn">
        <el-button type="success" size="small" @click="onceAgain">再来一次</el-button>
        <el-button type="success" size="small" @click="goBack">返回首页</el-button>
      </div>
    </div>
    <GetScore :userScore="this.userScore" v-if="this.isOpend == 4" @onceTime="getOpenOnce" />
  </div>
</template>
<script>
import head2 from '@/components/Head/head2.vue';
import BeginView from '@/components/beginView/beginView.vue';
import GetScore from '@/components/getScore/getScore.vue';
export default {
  components: { head2, BeginView, GetScore },
  data() {
    return {
      countDwon: 10,
      isOpend: 1,
      isEnd: false,
      textInfo: {
        val: "游戏开始了，加油小朋友",
        textTitlle: "比一比的玩法介绍",
        textContant:
          "小朋友，每次游戏你都有10秒钟的时间进行游戏，加油！！",
      },
      numberLeft: 0,
      numberRight: 0,
      userScore: {
        score: 0,
        allCount: 0,
        rightCount: 0,
        falseCount: 0,
        rightRate: 0,
        echartId: "compareCount"+new Date()
      },
    };
  },
  methods: {
    onceAgain() {
      var randomArr = Array.from(document.getElementsByClassName("divIn"));
      randomArr.forEach((item) => {
        item.style.backgroundColor = "";
      });
      this.rightRole1 = [];
      this.rightRole2 = [];
      this.isEnd = !this.isEnd;
      this.counts = 0;
    },
    goBack() {
      this.$router.push("/home");
    },
    lookEnd() {
      this.isEnd = !this.isEnd;
    },
    getOpen(val) {
      this.isOpend = val;
    },
    submit() {
      let count = 0;
      let arrColor = document.getElementsByClassName("stick");
      Array.from(arrColor).forEach((item) => {
        if (item.style.background == "green") {
          count++;
        }
      });
      if (count == 10) {
        this.isEnd = !this.isEnd
      } else {
        this.isEnd = !this.isEnd
      }
    },
    fanHui() {
      console.log(1231);
    },
    changeColor(item) {
      let arrColor = document.getElementsByClassName("stick");
      if (arrColor[item].style.background == "green") {
        arrColor[item].style.background = "rgb(233, 137, 137)";
      } else {
        arrColor[item].style.background = "green";
      }
      this.$refs.myAudio.play();

    },
  },
};
</script>

<style lang="less" scoped>
#theEnd{
  margin-top: -20px;
  margin-bottom: 10px;
}
#GameOver {
  width: 80vw;
  height: 65vh;
  background-color: rgb(218, 225, 218);
  z-index: 1000;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  #endTittle {
    margin-top: 20px;
    font-size: 20px;
    letter-spacing: 1px;
    font-weight: bold;
  }

  p {
    font-size: 18px;
    color: red;
    font-weight: bold;
    margin-bottom: 5vh;
    letter-spacing: 2px;
  }

  img {
    margin: 6vh auto 1vh;
    width: 90%;
    height: 30vh;
    object-fit: cover;
  }

  #btn {
    display: flex;
    justify-content: space-evenly;
    bottom: 0;
  }
}

.stick {
  width: 6vw;
  margin: 16px;
  height: 28vh;
  // border: solid 1px rgb(69, 67, 67);
  background: rgb(233, 137, 137);
  border-radius: 120px;
  transform: rotateX(60deg);
  margin-top: -5vh;
}

#content {
  display: flex;
  justify-content: space-around;
  align-content: flex-start;
  // align-items: center;
  flex-wrap: wrap;
  width: 96vw;
  height: 68vh;
  background-color: rgb(237, 215, 215);
  margin-top: 10px;
  border-radius: 5px 5px 0 0;
}

#Fhead {
  margin-top: 10px;
  font-size: 17px;

  #fanhui {
    float: left;
  }
}

#Interface {
  width: 96vw;
  height: 15vh;
  background-color: white;
  margin-top: 30px;
  border-radius: 5px 5px 0 0;
}
</style>